<template>
  <div style="height:100%">
    <breadcrumb :breadList="breadList" :name="name" style="margin-bottom: 12px;">
      <div class="handle-box" slot="handleContent" v-if="currentKey !== '1'">
        <!-- <div class="handle-btn">
          <a-button class="common-btn" >关联用户</a-button>
        </div> -->
        <div class="handle-btn">
          <a-button class="common-btn" @click="submitProMessage">提交</a-button>
        </div>
        <div class="handle-btn">
          <a-button @click="cancel" class="common-btn">取消</a-button>
        </div>
        <!-- <div class="handle-btn" v-if="currentType === 'update'">
          <a-button class="common-btn" @click="updateUser">修改用户</a-button>
        </div> -->
      </div>
    </breadcrumb>
    <a-card class="spec-card" :title="code" :bordered="false">
      <span class="card-title-btn-box">
        <a-button class="common-btn card-title-btn" @click="toSeeCount">查看关联用户</a-button>
      </span>
    </a-card>
    <div>
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane tab="项目详情" key="1">
          <add-projects type="detail" :statusCode="flag"></add-projects>
        </a-tab-pane>
        <a-tab-pane tab="项目变更" key="2">
          <add-projects type="modify" :statusCode="flag"></add-projects>
        </a-tab-pane>
        <a-tab-pane tab="项目结项" key="3">
          <a-card class="card" :bordered="false">
            <a-form>
              <a-row :gutter="16">
                <a-col :lg="24" :md="12" :sm="24">
                  <a-form-item label="招投标资料" :labelCol="{lg: {span: 3}, sm: {span: 7}}" :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
                    <div style="width:600px;display:flex;" >
                      <a-upload
                        name="file"
                        :multiple="true"
                        action="//jsonplaceholder.typicode.com/posts/"
                        :headers="headers"
                        @change="handleChange">
                        <a>
                          上传
                        </a>
                      </a-upload>
                    </div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :lg="24" :md="12" :sm="24">
                  <a-form-item label="备注" :labelCol="{lg: {span: 3}, sm: {span: 7}}" :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
                    <a-textarea rows="3" v-decorator="['queryParam.remark', {initialValue: currentPro.remark, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 500px;"/>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-card>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/tools/Breadcrumb'
import AddProjects from './addProjects'
export default {
  name: 'ProDetails',
  components: {
    Breadcrumb,
    AddProjects
  },
  data () {
    return {
      name: '',
      breadList: [],
      code: '',
      flag: true,
      currentKey: '1',
      form: this.$form.createForm(this),
      currentType: '', // 当前页面所属
      currentPro: {}, // 当前产品详情
      headers: {
        authorization: 'authorization-text'
      }
    }
  },
  created () {
    this.currentType = this.$route.query.type
    this.currentPro = JSON.parse(this.$route.query.proDetails)
    console.log('当前详情', this.currentPro.proName)
    this.getBreadCrumb()
    this.code = this.$route.query.type !== 'create' ? '项目编号：' + this.currentPro.proCode : '项目编号：' + 'SX_TY_001'
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
      this.breadList[2].meta.title = '项目详情'
    },
    handleChange (info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} 上传成功`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
    callback (key) {
      console.log(key)
      this.currentKey = key
    },
    cancel () {
      const that = this
      this.$confirm({
        title: '是否确定取消，取消后数据将清空',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '已取消'
          })
        }
      })
    },
    submitProMessage () {
      const that = this
      this.$confirm({
        title: '确认提交吗',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '已提交'
          })
        }
      })
    },
    updateUser () {
      const that = this
      this.$confirm({
        title: '用户一旦更改立即生效，请确认是否继续更改用户',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '已提交'
          })
        }
      })
    },
    toSeeCount () {
      this.$warning({
        title: '当前无关联用户'
      })
    }
  }
}
</script>

<style scoped>
.spec-card {
  height: 56px;
}
</style>
